<template>
  <div>Child: {{ count }}</div>
  <div>Num: {{ num }}</div>
  <button @click="handleClick">修改 count</button>
</template>
<script>
import { inject } from 'vue'
export default {
  setup() {
    // !#2 使用数据
    const count = inject('count')
    const num = inject('num')
    const changeCount = inject('changeCount')
    const handleClick = () => {
      // 目的：修改 count
      // 但是：不建议在这改
      // 因为要符合单项数据流的思想
      // 为了方便追溯错误
      // 建议在哪定义的数据在哪改
      changeCount(3)
    }
    return {
      count,
      num,
      handleClick,
    }
  },
}
</script>
